<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <style>
        /* 样式可以根据需求进行调整 */
        .user-info {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .user-info img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .user-info h2 {
            margin-bottom: 10px;
        }
        .user-info p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
<div class="user-info">
    <img id="avatar" src="" alt="avatar">
    <h2 id="name"></h2>
    <p><strong>性别:</strong> <span id="gender"></span></p>
    <p><strong>年龄:</strong> <span id="age"></span></p>
    <p><strong>电话:</strong> <span id="phone"></span></p>
    <p><strong>爱好:</strong> <span id="hobbies"></span></p>
    <p><strong>工作状态:</strong> <span id="jobStatus"></span></p>
    <p><strong>地址:</strong> <span id="address"></span></p>
    <p><strong>身高:</strong> <span id="height"></span></p>
    <p><strong>体重:</strong> <span id="weight"></span></p>
    <p><strong>学历:</strong> <span id="education"></span></p>
</div>

<script>
    // 通过后端接口获取用户信息
    fetch('/userInfo?id=${id}')  // 发起GET请求到后端接口
        .then(response => response.json())  // 解析返回的JSON数据
        .then(userInfo => {
            // 将返回的用户信息显示在页面上
            document.getElementById("avatar").src = userInfo.base64;
            document.getElementById("name").innerText = userInfo.name;
            document.getElementById("gender").innerText = userInfo.gender;
            document.getElementById("age").innerText = userInfo.age;
            document.getElementById("phone").innerText = userInfo.phone;
            document.getElementById("hobbies").innerText = userInfo.hobbies;
            document.getElementById("jobStatus").innerText = userInfo.jobStatus;
            document.getElementById("address").innerText = userInfo.address;
            document.getElementById("height").innerText = userInfo.height + "cm";
            document.getElementById("weight").innerText = userInfo.weight + "kg";
            document.getElementById("education").innerText = userInfo.education;
        })
        .catch(error => console.error('Error:', error));
</script>
</body>
</html>